<template>
  <div id="app">
    <!-- 其他页 -->
    <el-container class="home-container">
      <el-header>
        <!-- 导航栏 -->
        <header-nav></header-nav>
      </el-header>
      <el-container>
        <!-- 侧边栏-->
        <el-aside class="aside">
          <left></left>
        </el-aside>
        <!-- Body -->
        <el-main class="app-container">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Sidebar from './components/Sidebar'
import Navbar from './components/Navbar'

export default {
  name: 'App',
  components: {
    headerNav: Navbar,
    left: Sidebar
  }
}
</script>

<style lang="scss" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  background: #edf0f6;
  margin: -8px;
  min-height: 100vh;
}
.home-container{
  height: 100%;
}
::v-deep {
  .el-header{
    height: 50px !important;
    padding: 0;
    width: calc(100% - 240px);
    position: fixed;
    top: 0;
    right: 0;
  }
  .menu{
    position: fixed;
  }
  .aside{
    max-width: 240px;
  }
  .el-main{
    // width: calc(100vw - 240px);
    // height: calc(100vh - 50px);
    // position: fixed;
    // right: 0;
    // bottom: 0;
    overflow-x:hidden;
    margin-top: 50px;
  }
}
</style>
